<script setup lang="ts">
interface CrownBadgeProps {
  text?: string
}

const props = withDefaults(defineProps<CrownBadgeProps>(), {
  text: '最受欢迎'
})
</script>

<template>
  <div class="crown-badge">
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="crown-icon"
    >
      <!-- 皇冠 -->
      <path
        d="M3 14L6 9L9 12L12 6L15 12L18 9L21 14V18H3V14Z"
        fill="url(#crownGradient)"
      />
      <!-- 宝石装饰 -->
      <circle cx="6" cy="9" r="1.5" fill="#FFD700" />
      <circle cx="12" cy="6" r="1.5" fill="#FFD700" />
      <circle cx="18" cy="9" r="1.5" fill="#FFD700" />
      <!-- 底座 -->
      <rect x="3" y="18" width="18" height="3" rx="1" fill="url(#crownGradient)" />
      <defs>
        <linearGradient id="crownGradient" x1="0" y1="0" x2="24" y2="24">
          <stop offset="0%" stop-color="#FFD700" />
          <stop offset="100%" stop-color="#FFA500" />
        </linearGradient>
      </defs>
    </svg>
    <span class="badge-text">{{ props.text }}</span>
  </div>
</template>

<style scoped>
.crown-badge {
  position: absolute;
  top: -16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  animation: pulse 2s ease-in-out infinite;
  z-index: 10;
}

.crown-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.badge-text {
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.6);
  }
}
</style>
